<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'default',
		navigationBarBackgroundColor: '#F6F6F6',
		navigationBarTextStyle: 'black',
		backgroundColor: '#F6F6F6',
		navigationBarTitleText: '我的书架',
	},
}
</route>
<template>
	<view class="page-bookrack">
		<view class="w-full box-border" :style="{ height: contentHeight + 'rpx' }">
			<scroll-view
				class="w-full h-full"
				scroll-y
				v-if="thisPage === 1 && bookList.length"
				@scrolltolower="scrolltolower"
			>
				<view class="w-full px-4 py-4 box-border">
					<view
						v-for="item in bookList"
						:key="item.book_id"
						@tap="toDetails(item.book_id)"
						class="mb-4 last:mb-0"
					>
						<book-item
							:item="item"
							:isDel="true"
							@delete-book="info => ruleModal(true, info)"
						></book-item>
					</view>
				</view>
			</scroll-view>
			<no-page
				v-if="thisPage === 0 || (thisPage === 1 && !bookList.length)"
				height="100%"
				:type="thisPage === 0 ? 'btn' : 'msg'"
				:title="title"
				@click="retry"
			></no-page>
		</view>

		<uni-popup ref="popup" :mask-click="false" type="center" background-color="none">
			<view class="w-[100vw] px-4 box-border">
				<view class="w-full rounded-[30rpx] bg-white relative px-6 py-6 box-border">
					<text class="text-[#303030] text-[44rpx] w-full inline-block text-center"
						>确认删除书架</text
					>
					<view class="w-full pt-[74rpx] py-[87rpx]">
						<view class="text-[#303030] text-[29rpx]"
							>确认删除书架<text class="text-[#34A4E2]" v-if="bookInfo && bookInfo.name"
								>《{{ bookInfo.name }}》</text
							></view
						>
						<view class="text-[#ED8876] text-[29rpx] mt-6">该操作不可逆，请谨慎操作</view>
					</view>
					<view class="w-full grid grid-cols-2 gap-x-6">
						<view
							class="h-[83rpx] w-full rounded-[42rpx] text-[32rpx] text-[#fff] flex justify-center items-center"
							style="background: #ed8876"
							@tap="deleteBook(bookInfo.bookshelf_id)"
							>确认移除</view
						>
						<view
							@tap="ruleModal(false)"
							class="h-[83rpx] w-full rounded-[42rpx] text-[32rpx] text-[#fff] flex justify-center items-center"
							style="background: #2ba5e0"
							>取消操作</view
						>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
import { getBookList, delBook } from '@/service/book';
import { systemInfo } from '@/utils/getSystemInfo';

const { contentHeight } = systemInfo();
const popup = ref(null);
const bookList = ref([]);
const title = ref('');
const thisPage = ref(-1);
const page = ref({ number: 1, size: 10 });
const hasMore = ref(true);
const bookInfo = ref(null);

onShow(() => {
	getList();
});

const toDetails = (id: number) => {
	if (!id) return;
	uni.navigateTo({
		url: `/pages-book/details/index?id=${id}`,
	});
};

const ruleModal = (flag, item?) => {
	if (flag) {
		popup.value.open();
		bookInfo.value = item;
	} else {
		popup.value.close();
		bookInfo.value = null;
	}
};

const deleteBook = async (id: number) => {
	uni.showLoading({ title: '加载中...' });
	try {
		const res = await delBook({
			bookself_id: id,
		});
		uni.hideLoading();
		ruleModal(false);
		if (res.status_code === 200) {
			uni.showToast({
				icon: 'none',
				title: '删除成功',
			});
		} else {
			uni.showToast({
				icon: 'none',
				title: res.message,
			});
		}
		getList();
	} catch (error) {
		ruleModal(false);
		uni.showToast({
			icon: 'none',
			title: '删除失败',
		});
		getList();
	}
};

const scrolltolower = () => {
	if (!hasMore.value) return;
	page.value.number++;
	getList();
};

const getList = async () => {
	uni.showLoading({ title: '加载中...' });
	try {
		const res = await getBookList({
			page: page.value.number,
			page_size: page.value.size,
		});
		uni.hideLoading();
		if (res.status_code === 200 && res.data) {
			thisPage.value = 1;
			bookList.value = page.value.number === 1 ? res.data : [...bookList.value, ...res.data];
			if (res.data.length < page.value.size) {
				hasMore.value = false;
			}
			if (!bookList.value.length) {
				title.value = '暂无数据';
			}
		} else {
			thisPage.value = 0;
			title.value = res.message;
		}
	} catch (error) {
		uni.hideLoading();
		thisPage.value = 0;
		title.value = '服务器异常';
	}
};

const retry = () => {
	hasMore.value = true;
	page.value = { number: 1, size: 10 };
	getList();
};
</script>

<style lang="scss">
page {
	background: #f6f6f6;
}
</style>
<style lang="scss" scoped>
.page-bookrack {
	width: 100%;
	height: 100vh;
}

.rule-modal {
	background: linear-gradient(0deg, #fff, #aac6f8);
}
</style>
